<template>
  <div id="contractTemplate">
    <Layout ref="layout" :total="total" type="2" :listQuery="listQuery" @search="getTableData">
      <template #btn>
        <el-button type="primary" round @click="$router.push('editTemplate')">添加合同模板</el-button>
      </template>
      <template #table="{ height }">
        <SettingTable v-loading="loading" :height="height" :list="list" :tableData="tableData">
          <template #oper="{ row }">
            <span class="oper" @click="oper(row, 1)">预览</span>
            <span class="oper" @click="oper(row, 4)">编辑</span>
            <span class="oper" @click="oper(row, 2)">{{ row.enable ? "禁用" : "启用" }}</span>
            <span class="oper" @click="oper(row, 3)">删除</span>
          </template>
        </SettingTable>
      </template>
    </Layout>
    <el-dialog title="模板预览" :visible.sync="isDialog">
      <div class="editor-content" v-html="templateInfo"></div>
    </el-dialog>
  </div>
</template>

<script>
import { HTMB } from "./config";
import Layout from "../layout/index.vue";
import SettingTable from "../layout/SettingTable.vue";
export default {
  name: "moveSearch",
  components: { Layout, SettingTable },
  data() {
    return {
      tableData: [],
      list: HTMB,

      total: 0,
      listQuery: {
        PageSize: 50,
        PageIndex: 1,
      },

      loading: false,
      templateInfo: "",
      isDialog: false,
    };
  },
  methods: {
    async getTableData(e) {
      this.loading = true;
      const { TemplateName, pageIndex, pageSize } = e || {};
      const params = { TemplateName: TemplateName || "", PageSize: pageSize || this.listQuery.PageSize, PageIndex: pageIndex || this.listQuery.PageIndex };
      const { data } = await this.$api.optionsManage.GetPage(params);
      this.tableData = data.data.data;
      this.total = data.data.total;
      this.loading = false;
    },
    async oper({ templateId, enable }, command) {
      if (command === 1) {
        //预览
        const { data } = await this.$api.optionsManage.GetTemplateContent({ templateId });
        this.templateInfo = data.data.templateContent;
        this.isDialog = true;
      }
      // 停用启用
      if (command === 2) {
        await this.$confirm(`此操作将${enable ? "禁用" : "启用"}该合同模板, 是否继续?`, "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" });
        await this.$api.optionsManage.EditEnableStart({ contractTemplateId: templateId, isEnable: !enable });
        this.$refs.layout.onSearch();
      }
      if (command === 3) {
        //删除
        await this.$confirm("此操作将永久删除该合同模板, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" });
        await this.$api.optionsManage.DelContractTemplate({ templateId });
        this.$refs.layout.onSearch();
      }
      command === 4 && this.$router.push({ name: "editTemplate", query: { templateId } }); // 编辑
    },
  },
  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
#contractTemplate {
  :deep(.editor-content) {
    height: 500px;
    overflow: auto;
    img{
      max-width: 100% !important;
    }
  }
}
</style>
